<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格组件</title>
</head>
{#引入bootstrap3.4.1的css文件和jquery文件和bootstrap.js文件#}
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<body>
{#定义表格组件#}
<div class="container">
    <div class="row" style="margin-bottom: 20px;">
        <div class="col-md-3">
            <button class="btn btn-primary btn-lg" id="add-btn" style="margin-right: 20px;" data-toggle="modal"
                    data-target="#add-modal">新增数据
            </button>
        </div>
    </div>
    <div class="row" id="table-component">
        <table class="table table-bordered">
            <thead>
            <tr>
                {% for column in columns %}
                    <th>{{ column }}</th>
                {% endfor %}
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {% for data in datas %}
                <tr>
                    {% for item in data %}
                        <td>{{ item }}</td>
                    {% endfor %}
                    <td>
                        {#                        editData传入此行的第一个元素值，还有当前元素所在列的列名，用于填充input框#}
                        <button class="btn btn-warning edit-btn btn-md" data-id="{{ data.0 }}" data-toggle="modal"
                                data-target="#edit-modal" onclick="editData('{{ data.0 }}', '{{ columns.0 }}')">编辑
                        </button>
                        <button class="btn btn-danger delete-btn btn-md" onclick="delete_data('{{ data.0 }}')">删除
                        </button>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>

{#点击编辑时弹出模态框#}
<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">根据{{ columns.0 }}编辑数据</h4>
            </div>
            <div class="modal-body">
                <form id="edit-form">
                    {% for column in columns %}
                        <div class="form-group">
                            <label for="edit-{{ column }}">{{ column }}</label>
                            <input type="text" class="form-control" id="edit-{{ column }}" name="edit-{{ column }}">
                        </div>
                    {% endfor %}
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="edit-submit-btn">提交</button>
            </div>
        </div>
    </div>
</div>

{#点击新增时弹出模态框#}
<div class="modal fade" id="add-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">新增数据</h4>
            </div>
            <div class="modal-body">
                <form id="add-form">
                    {% for column in columns %}
                        <div class="form-group">
                            <label for="{{ column }}">{{ column }}</label>
                            <input type="text" class="form-control" id="{{ column }}" name="{{ column }}">
                        </div>
                    {% endfor %}
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="add-submit-btn" onclick="add_data()">提交</button>
            </div>
        </div>
    </div>
</div>


</body>
<script>
    // 点击编辑按钮时，将所有数据填充到对应的input框中，
    function editData(first_item, column) {
        // 获取模态框中对应的input框
        let modal_first_item = document.getElementById("edit-" + column);
        // 将第一个元素值填充到input框中
        modal_first_item.value = first_item;
        // 将第一个input框设置为只读
        modal_first_item.readOnly = true;
    }


    // 点击删除
    function delete_data(id) {
        // 发送axios请求，删除数据
        axios.post("{{url_for('del_data')}}", {
            "username": id
        }).then(function (response) {
            alert(response.data.message);
            // 刷新页面
            location.reload();
        }).catch(function (error) {
            console.log(error);
            // 刷新页面
            location.reload();
        });
    }


    // 点击新增按钮时

    function add_data() {
        // 获取新增数据表单中的所有数据
        var form_data = new FormData(document.getElementById("add-form"));
        var username = form_data.get("username");
        var password = form_data.get("password");
        // 发送axios请求，新增数据
        axios.post("{{url_for('register')}}", {username: username, password: password}
        ).then(function (response) {
            alert(response.data.message);


        }).catch(function (error) {
            console.log(error);
            // 刷新页面
            location.reload();
        });
    }

</script>
{#引入axios#}
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
</html>